<template>
  <div class="search-history">
    <van-cell title="搜索历史">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-icon v-if="!delshow" name="delete" @click="delshow = true" />
        <span v-else
          ><span @click="delall">全部删除 </span>
          <span @click="delshow = false"> 完成</span></span
        >
      </template>
    </van-cell>
    <van-cell
      @click="delonce(index, item)"
      v-for="(item, index) in historyData"
      :key="index"
      :title="item"
    >
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-icon name="close" v-if="delshow" />
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //垃圾桶 点击后 显示全部删除 和完成
      delshow: false
    };
  },
  props: {
    historyData: {
      type: Array
    }
  },
  methods: {
    //全部删除  子传父
    delall() {
      this.$emit("delhistory");
    },
    //删除单个  传index  子传父  传一个状态this.delshow false===点击后显示搜索结果   true====删除
    delonce(index, item) {
      this.$emit("deloncehistory", index, item, this.delshow);
    }
  }
};
</script>
<style scoped></style>
